<jsp:include page="../../header.jsp">
			<jsp:param value="item1" name="item"/>
</jsp:include> 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

 <section class="content">
	<section class="widget"  id="department" >
		<header>
			<span class="icon">&#128196;</span>
			<hgroup>
				<h1>公司报表</h1>
				<h2>差旅统计</h2>
			</hgroup>
		</header>
		<div class="content">
			<div class="tabs" id="tabs">
				<ul>
			        <li class="on">月报</li>
			        <li>季报</li>
			        <li>节省统计</li>
			    </ul>
			    <div name="oDiv">
				  	<form name="dmform">
				  		请选择部门，年份
					  	<div class="doublesel">	
					  		<s:doubleselect formName="dmform" name="mode" list="delist" listKey="departmentId" listValue="departmentName" 
					   		 doubleName="demoyear" doubleList="demoyearmap.get(top.DepartmentId)" doubleListKey="year" doubleListValue="year" theme="simple" />
					    </div>
				    	<!--  <input type="button" value="查看" onclick=showDeChart(0) /> -->
				    </form>
				    <div id="demochart" style="width: 800px; height: 360px; margin: 0 auto"></div>
				    
				    <form name="cmform">
				    	请选择年份
					    <s:select name="comoyear" list="comoyearlist" listKey="year" listValue="year" />
				    </form>
				    <div id="comochart" style="width: 800px; height: 360px; margin: 0 auto"></div>
				 </div>
				 
			     <div class="hide" name="oDiv">
					<form name="dqform">
						请选择部门，年份
						<div class="doublesel">	
							<s:doubleselect formName="dqform" name="qude" list="delist" listKey="departmentId" listValue="departmentName" 
							 doubleName="dequyear" doubleList="dequyearmap.get(top.DepartmentId)" doubleListKey="year" doubleListValue="year" theme="simple"></s:doubleselect>
						</div>
					<!--  <input type="button" value="查看" onclick=showDeChart(1) />-->
					</form>
					<div id="dequchart" style="width: 800px; height: 360px; margin: 0 auto"></div>
			    
				    <form name="cqform">
				    	请选择年份
					     <s:select name="coquyear" list="coquyearlist" listKey="year" listValue="year" />
				    </form>
				 	<div id="coquchart" style="width: 800px; height: 360px; margin: 0 auto"></div>
				 </div>
				
				<div class="hide" name="oDiv">
				 	<form name="dscform">
				 		请选择年份
					    <s:select name="descyear" list="descyearlist" listKey="year" listValue="year" />
				    </form>
				 	<div id="descchart" style="width: 800px; height: 360px; margin: 0 auto"></div>
				</div>
		    </div>
		</div>
	</section>

	<script type="text/javascript">  
		var demochart,dequchart,comochart,coquchart,descchart;
	    //function onload(){
	    $(function(){
			 var oTab = document.getElementById("tabs");
		     var oUl = oTab.getElementsByTagName("ul")[0];
		     var oLis = oUl.getElementsByTagName("li");
		     var oDivs= document.getElementsByName("oDiv");
		
		     for(var i= 0,len = oLis.length;i<len;i++){  
		         oLis[i].index = i;
		         oLis[i].onclick = function() {
		             for(var n= 0;n<len;n++){
		                 oLis[n].className = "";
		                 oDivs[n].className = "hide";//隐藏的类名
		             }
		          this.className = "on";//显示的类名
		          oDivs[this.index].className = "";
		         };
		     }

	    	$.ajax({	//demo
				url: "showchart!getDeReport.action",
				type: "get",  
				dataType: "JSON",
				data: {"deid":$("#qude option:selected").val(),"year":$("#demoyear option:selected").val(),"type":0},
				contentType: "application/json",
	            async: false,
	            
				success: function(jsonResult){
					var data;
					if(jsonResult=="error"){
						data = "[{type:'column',name:'Random data',data:[]}]";
						data = eval("("+data+")");
					}else{
						data = eval("("+jsonResult+")").dataList;
					}
					//此处构建曲线  
					demochart=new Highcharts.Chart({
						chart:{
							renderTo:'demochart' ,  
		     				type: 'column'//图表的显示类型（line,spline,scatter,splinearea,bar,pie,area,column）  
							},
						colors:[
							'#A2ABF1',
							'#000000',
							'#18F775'
						],
						title:{  
		    				text: '部门月报',//主标题  
		        			x: -20, //center  
							style:{fontWeight:'bold'}
							},  
						xAxis: {   //横坐标  
		       				//categories: jsonResult.dataXlist,
		       				categories: [1,2,3,4,5,6,7,8,9,10,11,12],
		       				title: {
		       					enabled: true,
		       					text: '月份',
		       					style:{fontWeight:'bold'}
		       					},
		       				labels:{style:{fontWeight:'bold'}}
						},  
						yAxis: {  
		   					title: {  
								text: '金额/元', //纵坐标 
								style:{fontWeight:'bold'}
								},  
		         			labels:{style:{fontWeight:'bold'}}
		       			},
		       			lang: {
		       				noData: "无相关数据",
		       			}, 
						tooltip: { //数据点的提示框  
		      				formatter: function() { //formatter格式化函数  
		      					return '<b>'+ this.series.name +'</b><br/>'+ this.x +'月: '+ this.y+'元';  
		     				}  
		 				}, 
						legend: {  
		       				layout: 'vertical',  
							align: 'right',  
							verticalAlign: 'top',  
							x: -10,  
							y: 100,  
							borderWidth: 0  
						},
						series:
							data //主值
						/*,lang:{},noData:{position:{align: 'right',verticalAlign:'bottom'},attr:{},style:{}}*/
	   				});
				},
				error: function(){
					alert("失败");
				} 
	        });
	        
	        $.ajax({	//dequ
				url: "showchart!getDeReport.action",
				type: "get",  
				dataType: "JSON",
				data: {"deid":$("#qude option:selected").val(),"year":$("#dequyear option:selected").val(),"type":1},
				contentType: "application/json",
				async: false,
	           
				success: function(jsonResult){
					var data;
					if(jsonResult=="error"){
						data = "[{type:'column',name:'Random data',data:[]}]";
						data = eval("("+data+")");
					}else{
						data = eval("("+jsonResult+")").dataList;
					}
					//此处构建曲线  
					dequchart=new Highcharts.Chart({
						chart:{
							renderTo:'dequchart' ,  
		     				type: 'column'//图表的显示类型（line,spline,scatter,splinearea bar,pie,area,column）  
							},
						colors:[
							'#A2ABF1',
							'#000000',
							'#18F775'
						], 
						title:{  
		    				text: '部门季报',//主标题  
		        			x: -20, //center  
							style:{fontWeight:'bold'}
							},  
						xAxis: {   //横坐标  
		       				categories: ['第一季','第二季','第三季','第四季'],
		       				title: {
		       					enabled: true,
		       					text: '季度',
		       					style:{fontWeight:'bold'}
		       					},
		       				labels:{style:{fontWeight:'bold'}}
						},  
						yAxis: {  
		   					title: {  
								text: '金额/元', //纵坐标 
								style:{fontWeight:'bold'}
								},  
		         			labels:{style:{fontWeight:'bold'}}
		       			},  
						tooltip: { //数据点的提示框  
		      				formatter: function() { //formatter格式化函数  
		      					return '<b>'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y+'元';  
		     				}  
		 				},
		 				lang: {
		       				noData: "无相关数据",
		       			}, 
						legend: {  
		       				layout: 'vertical',  
							align: 'right',  
							verticalAlign: 'top',  
							x: -10,  
							y: 100,  
							borderWidth: 0  
						},
						series:
							data //主值
	   				});
				},
				error: function(){
					alert("失败");
				} 
	        });
	        
	        $.ajax({	//como
				url: "showchart!getCoReport.action",
				type: "get",  
				dataType: "JSON",
				data: {"year":$("#comoyear option:selected").val(),"type":0},
				contentType: "application/json",
				async: false,
	           
				success: function(jsonResult){
					var data;
					if(jsonResult=="error"){
						data = "[{type:'column',name:'Random data',data:[]}]";
						data = eval("("+data+")");
					}else{
						data = eval("("+jsonResult+")").dataList;
					}
					//此处构建曲线  
					comochart=new Highcharts.Chart({
						chart:{
							renderTo:'comochart' ,  
		     				type: 'column'//图表的显示类型（line,spline,scatter,splinearea bar,pie,area,column）  
							},
						colors:[
							'#A2ABF1',
							'#000000',
							'#18F775'
						], 
						title:{  
		    				text: '公司月报',//主标题  
		        			x: -20, //center  
							style:{fontWeight:'bold'} 
							},  
						xAxis: {   //横坐标  
		       				categories: [1,2,3,4,5,6,7,8,9,10,11,12],
		       				title: {
		       					enabled: true,
		       					text: '月份',
		       					style:{fontWeight:'bold'}
		       					},
		       				labels:{style:{fontWeight:'bold'}}
						},  
						yAxis: {  
		   					title: {  
								text: '金额/元', //纵坐标 
								style:{fontWeight:'bold'}
								},  
		         			labels:{style:{fontWeight:'bold'}}
		       			},  
						tooltip: { //数据点的提示框  
		      				formatter: function() { //formatter格式化函数  
		      					return '<b>'+ this.series.name +'</b><br/>'+ this.x +'月: '+ this.y+'元';  
		     				}  
		 				},
		 				lang: {
		       				noData: "无相关数据",
		       			}, 
						legend: {  
		       				layout: 'vertical',  
							align: 'right',  
							verticalAlign: 'top',  
							x: -10,  
							y: 100,  
							borderWidth: 0  
						},
						series:
							data //主值
	   				});
				},
				error: function(){
					alert("失败");
				} 
	        });   
	        
	        $.ajax({	//coqu
				url: "showchart!getCoReport.action",
				type: "get",  
				dataType: "JSON",
				data: {"year":$("#coquyear option:selected").val(),"type":1},
				contentType: "application/json",
				async: false,
	           
				success: function(jsonResult){
					var data;
					if(jsonResult=="error"){
						data = "[{type:'column',name:'Random data',data:[]}]";
						data = eval("("+data+")");
					}else{
						data = eval("("+jsonResult+")").dataList;
					}
					//此处构建曲线  
					coquchart=new Highcharts.Chart({
						chart:{
							renderTo:'coquchart' ,  
		     				type: 'column'//图表的显示类型（line,spline,scatter,splinearea bar,pie,area,column）  
							},
						colors:[
							'#A2ABF1',
							'#000000',
							'#18F775'
						],
						title:{  
		    				text: '公司季报',//主标题  
		        			x: -20, //center  
							style:{fontWeight:'bold'}
							},  
						xAxis: {   //横坐标  
		       				categories: ['第一季','第二季','第三季','第四季'],
		       				title: {
		       					enabled: true,
		       					text: '季度',
		       					style:{fontWeight:'bold'}
		       					},
		       				labels:{style:{fontWeight:'bold'}}
						},  
						yAxis: {  
		   					title: {  
								text: '金额/元', //纵坐标 
								style:{fontWeight:'bold'}
								},  
		         			labels:{style:{fontWeight:'bold'}}
		       			},  
						tooltip: { //数据点的提示框  
		      				formatter: function() { //formatter格式化函数  
		      					return '<b>'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y+'元';  
		     				}  
		 				},
		 				lang: {
		       				noData: "无相关数据",
		       			},  
						legend: {  
		       				layout: 'vertical',  
							align: 'right',  
							verticalAlign: 'top',  
							x: -10,  
							y: 100,  
							borderWidth: 0  
						},
						series:
							data //主值
	   				});
				},
				error: function(){
					alert("失败");
				} 
	        });
	        
	        $.ajax({	//demo
				url: "showchart!getSavingcostReport.action",
				type: "get",  
				dataType: "JSON",
				data: {"year":$("#descyear option:selected").val()},
				//data: {"year":2015},
				contentType: "application/json",
	            async: false,
	            
				success: function(jsonResult){
					var data;
					if(jsonResult=="error"){
						data = "[{type:'column',name:'Random data',data:[]}]";
						data = eval("("+data+")");
					}else{
						data = eval("("+jsonResult+")").dataList;
					}
					//此处构建曲线  
					descchart=new Highcharts.Chart({
						chart:{
							renderTo:'descchart' ,  
		     				type: 'line'//图表的显示类型（line,spline,scatter,splinearea,bar,pie,area,column）  
							},
						title:{  
		    				text: '部门节省费用',//主标题  
		        			x: -20, //center  
							style:{fontWeight:'bold'}
							},  
						xAxis: {   //横坐标  
		       				//categories: jsonResult.dataXlist,
		       				categories: [1,2,3,4,5,6,7,8,9,10,11,12],
		       				title: {
		       					enabled: true,
		       					text: '月份',
		       					style:{fontWeight:'bold'}
		       					},
		       				labels:{style:{fontWeight:'bold'}}
						},  
						yAxis: {  
		   					title: {  
								text: '金额/元', //纵坐标 
								style:{fontWeight:'bold'}
								},  
		         			labels:{style:{fontWeight:'bold'}}
		       			},
		       			lang: {
		       				noData: "无相关数据",
		       			}, 
						tooltip: { //数据点的提示框  
		      				formatter: function() { //formatter格式化函数  
		      					return '<b>'+ this.series.name +'</b><br/>'+ this.x +'月: '+ this.y+'元';  
		     				}  
		 				}, 
						legend: {  
		       				layout: 'vertical',  
							align: 'right',  
							verticalAlign: 'top',  
							x: -10,  
							y: 100,  
							borderWidth: 0  
						},
						series:
							data //主值
						/*,lang:{},noData:{position:{align: 'right',verticalAlign:'bottom'},attr:{},style:{}}*/
	   				});
				},
				error: function(){
					alert("失败");
				} 
	        });
	         
	    });
	    
	    //在替换option选项时都会触发getchart
	    $("#mode").change(function(){	//月，部门
	    	getChart(
	    		"showchart!getDeReport.action",
	    		{"deid":$("#mode option:selected").val(),"year":$("#demoyear option:selected").val(),"type":0},
	    		demochart
	    	);
		});
	    $("#demoyear").change(function(){	//月，年
	    	getChart(
	    		"showchart!getDeReport.action",
	    		{"deid":$("#mode option:selected").val(),"year":$("#demoyear option:selected").val(),"type":0},
	    		demochart
	    	);
		});
		
		$("#qude").change(function(){	//季，部门
	    	getChart(
	    		"showchart!getDeReport.action",
	    		{"deid":$("#qude option:selected").val(),"year":$("#dequyear option:selected").val(),"type":1},
	    		dequchart
	    	);
		});
		$("#dequyear").change(function(){	//季，年
	    	getChart(
	    		"showchart!getDeReport.action",
	    		{"deid":$("#qude option:selected").val(),"year":$("#dequyear option:selected").val(),"type":1},
	    		dequchart
	    	);
		});
		
		$("#comoyear").change(function(){	//公司，月
	    	getChart(
	    		"showchart!getCoReport.action",
	    		{"year":$("#comoyear option:selected").val(),"type":0},
	    		comochart
	    	);
		});
		
		$("#coquyear").change(function(){	//公司，季
	    	getChart(
	    		"showchart!getCoReport.action",
	    		{"year":$("#coquyear option:selected").val(),"type":1},
	    		coquchart
	    	);
		});
		
		$("#descyear").change(function(){
			getChart(
				"showchart!getSavingcostReport.action",
				{"year":$("#descyear option:selected").val()},
				descchart
			);
		});
		
		function getChart(url,data,chart){
			$.ajax({
				url: url,
				type: "get",  
				dataType: "JSON",
				data: data,
				contentType: "application/json",
	           
				success: function(jsonResult){
					var series=chart.series;                  
	                while(series.length > 0) {  //清除
	                    series[0].remove(true);  
	                }
					if(jsonResult=="error"){
		                chart.addSeries({
		                		type: 'column',                       
			                    name: 'Random data',  
			                    data: []
			                }, true); 
					}else{
						var jsonResult = eval("("+jsonResult+")");
		                for(var i=0;i<jsonResult.dataList.length;i++){	//修改
			               chart.addSeries({                          
			                    name: jsonResult.dataList[i].name,  
			                    data: jsonResult.dataList[i].data
			                }, true);  
		                }
		        	}
				},
				error: function(){
					alert("失败");
				} 
	       	});
		}
	</script>
<%@ include file="../../footer.jsp" %>
